﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-au" dir="ltr">
<head>
    <title>{TITLE}</title>
	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/favicon.png"/>
	<link href="{U_STATIC}/styles/boxsocial.css" rel="Stylesheet" media="screen, projection" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, minimal-ui" />

	<style type="text/css">
		<!--

@media screen and (min-width: 481px) {
		.about-app {
		    float: right;
		    width: 200px;
		}
		
		.form-app {
		    margin-right: 200px;
		    max-width: 700px;
		}

        #header {
            background-color: #ff9955;
            height: 48pt;
            position: relative;
        }
}

@media screen and (max-width: 480px) {
		.about-app {
		}
		
		.form-app {
		    max-width: 700px;
		}

        #header {
            background-color: #ff9955;
            height: 32pt;
            position: relative;
        }
}
		
		#page {
		    width: auto;
		    max-width: 900px;
		    padding: 10px;
		}

        .form-app dl {
            width: 100%;
            margin: 0;
            padding: 0;
            clear: both;
            overflow: hidden;
        }

        .form-app dl dt {
            clear: left;
            margin-left: 0;
            padding: 0;
            float: left;
            width: 30%;
        }

        .form-app dl dd {
            padding: 0;
            margin-left: 0;
            float: left;
            width: 70%;
        }

--></style>
</head>
<body>
    <div id="header">
        <img src="/images/boxsocial-logo-mobile@2x.png" style="height: 100%" />
    </div>
	<div id="page">
        <div class="about-app">
            <!-- IF APP_ICON -->
            <p><img src="{APPLICATION_ICON}" title="{APPLICATION_TITLE}" /></p>
            <!-- ENDIF -->
        </div>
        <p>{AUTHORISE_APPLICATION}</p>
        <div class="form-app">
            <form action="{U_POST}" method="post">
                <fieldset>
        		    <dl>
            <!-- IF REQUIRE_LOGIN -->
					    <dt><label for="username">{L_USERNAME}:</label></dt>
					    <dd>{S_USERNAME}</dd>
					    <dt><label for="password">{L_PASSWORD}:</label></dt>
					    <dd>{S_PASSWORD}</dd>
            <!-- ENDIF -->
            <!-- IF VERIFY -->
            			<dt><label for="verify">{L_VERIFICATION_CODE}</label></dt>
						<dd>{S_VERIFY}</dd>
            <!-- ENDIF -->
                        <dt></dt>
					    <dd>{S_SUBMIT} {S_CANCEL}</dd>
                    </dl>
                    {S_OAUTH_TOKEN}
                    {S_MODE}
                </fieldset>
            </form>
        </div>
    </div>
</body>
</html>
